<template>
    <div class="activity-detail f f-ac f-col">
        <Breadcrumb router />
        <div class="activity-detail-body">
            <div class="body-top f f-ac f-jb">
                <img class="top-left" :src="baseUrl+detail.image" />
                <div class="top-right f f-col f-js">
                    <div class="skill-title line-1">{{ detail.title || "-" }}</div>
                    <div class="mb-20">{{ detail.tags? detail.tags[0] :'' }}</div>
                    <div class="mb-20">{{ detail.tags? detail.tags[1] : ''}}</div>
                    <div class="mb-20">{{ detail.tags? detail.tags[2] : "" }}</div>
                    <div class="mb-20 line-3" v-html="detail.content" />
                </div>
            </div>
            <div class="body-bottom">
                <My-btn label="活动预定室" bg-color="line-blue" read-only class="btn" />
                <Sign-form title="场馆名称" :address="false" name :titleContent="detail.title" @signForm="handleSign" />
                <!-- :chooseTime="application_time" -->
            </div>
        </div>
    </div>
</template>

<script>
    import SignForm from "@/components/SignForm";
    import {
        venueSite,
        venueApplication
    } from "@/utils/order/index.js";
    export default {
        components: {
            SignForm
        },
        data() {
            return {
                baseUrl: process.env.VUE_APP_BASE_API,
                detail: {},
                signForm: {},
                application_time: '',
                time: '',
                venue_lists_id: ""
            };
        },

        mounted() {},
        created() {
            this.getDetails(this.$route.query.id);
            this.time = this.$route.query.time
            this.application_time = this.$route.query.application_time
            this.venue_lists_id = this.$route.query.venue_lists_id
            // this.detail = JSON.parse(this.$route.query.detail)
        },
        methods: {
            // 获取详情
            getDetails(id) {
                let that = this
                venueSite({
                    id
                }).then((response) => {
                    that.detail = response.data
                    that.detail.tags = that.detail.tags.split(',')

                });
            },

            handleSign(v) {
                let that = this
                v.venue_site_id = Number(that.detail.id),
                    v.venue_lists_id = Number(that.venue_lists_id),
                    v.time = that.time
                v.application_time = that.application_time
                console.log(v,'vvvvvv')

                venueApplication(v).then((response) => {
                    if (response.code == 200) {
                        that.$message({
                            message: response.msg,
                            type: 'success'
                        });
                        window.history.go(-1);
                    }
                });
            },
        },
    };
</script>

<style lang="scss" scoped>
    .activity-detail {
        width: 100%;

        &-body {
            width: 1200px;

            .body-top {
                width: 100%;
                height: 292px;
                padding: 30px 0;
                border-bottom: 1px solid #d9d9d9;

                .top-left {
                    width: 408px;
                    height: 292px;
                    margin-right: 30px;
                }

                .top-right {
                    width: 762px;
                    height: 292px;

                    .skill-title {
                        color: #193980;
                        font-size: 24px;
                        font-weight: 600;
                        line-height: 50px;

                        &::after {
                            content: "";
                            display: block;
                            width: 115px;
                            height: 2px;
                            background: #0a4ab6;
                            margin: 20px 0;
                        }
                    }
                }
            }

            .body-bottom {
                position: relative;

                .btn {
                    position: absolute;
                    left: 0;
                    top: 30px;
                }
            }
        }
    }
</style>